<template>
  <div class="fixed top-0 left-0 w-100vw h-100vh flex items-center justify-center z-50">
    <div class="loading z-10 relative"></div>
    <div class="w-full h-full bg-black/20 absolute top-0 left-0 z-1"></div>
  </div>
</template>

<style scoped lang="scss">
.loading {
  position: relative;
  width: 30px;
  height: 30px;
  border: 2px solid var(--primary-purple);
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;

  animation: circle infinite 0.75s linear;
}

@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
